<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeOut</title>
    <script src="../jquery-3.4.1.js"></script>
    <style>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <h2>fadeOut</h2>
    <p>测试文字淡入效果</p>
    淡出的隐藏效果：
    <select id="animation">
        <option value="1">fadeOut( )</option>
        <option value="2">fadeOut( "slow" )</option>
        <option value="3">fadeOut( 3000 )</option>
        <option value="4">fadeOut( 1000, complete )</option>
        <option value="5">fadeOut( 1000, "linear" )</option>
        <option value="6">fadeOut( options )</option>
    </select>

    <br/><br/>

    <input id="btnFadeOut" type="button" value="点击淡出隐藏" />
    <input id="btnShow" type="button" value="显示" />
</body>
<script>
    $("#btnShow").click(function() {
        $("p").show();
    });
    $("#btnFadeOut").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeOut();
        } else if (v == "2") {
            $("p").fadeOut("slow");
        } else if (v == "3") {
            $("p").fadeOut(3000);
        } else if (v == "4") {
            $("p").fadeOut(2000, function() {
                alert("隐藏完毕!");
            });
        } else if (v == "5") {
            $("p").fadeOut(1000, "linear");
        } else if (v == "6") {
            $("p").fadeOut({
                duration: 1000
            });
        }
    });
    //fadein: 淡入效果，内容显示，opacity是0到1
    //fadeto: 是淡入淡出的总结，中间opacity参数取决于效果是淡入还是淡出的，
    // 一般我们可传0-1,如果输入0则表示从有到无，也就是我们所说的淡出，如果输入1表示无到有，也就是我们所说的淡入，那么如果0.1也算是淡入，因为0.1也是有透明度的，所以属于淡入。
</script>
</html>